<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}（放大10倍后：{{ bigSum }}）</h2>
        <button @click="sumPlusOne">点我 sum + 1</button>
        <hr/>
        <img v-for="(dog, index) in dogList" :src="dog" :key="index"/>
        <button @click="addADog">再来一只狗</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import useSum from '@/hooks/useSum';
    import useDog from '@/hooks/useDog';

    // 自定义hook
    const { sum, sumPlusOne, bigSum } = useSum();
    const { dogList, addADog } = useDog();
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
    img {
        height: 200px;
    }
</style>